<template>
  <div style="width: 1592px; padding: 20px 80px; background-color: #f6f8f9">
    <a-row :gutter="24">
      <a-col v-for="coi in 2" :key="coi" :span="6">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            width: 340px;
            height: 268px;
            background-color: white;
            cursor: pointer;
          "
        >
          <div
            v-if="
              isEdit &&
              !portletList.filter((m) => m.params.parentId === layoutId && m.params.parentSection === coi).length
            "
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
              border: 1px solid black;
            "
            @click="$emit('addPortlet', { parentId: layoutId, parentSection: coi })"
          >
            <span style="font-size: 84px">{{ coi }}</span>
          </div>

          <component
            :is="item.com"
            v-for="(item, index) in portletList.filter(
              (m) => m.params.parentId === layoutId && m.params.parentSection === coi
            )"
            :key="index"
          ></component>
        </div>
      </a-col>

      <a-col :span="12">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            width: 700px;
            height: 268px;
            background-color: white;
            cursor: pointer;
          "
        >
          <div
            v-if="
              isEdit &&
              !portletList.filter((m) => m.params.parentId === layoutId && m.params.parentSection === 3).length
            "
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
              border: 1px solid black;
            "
            @click="$emit('addPortlet', { parentId: layoutId, parentSection: 3 })"
          >
            <span style="font-size: 84px">3</span>
          </div>

          <component
            :is="item.com"
            v-for="(item, index) in portletList.filter(
              (m) => m.params.parentId === layoutId && m.params.parentSection === 3
            )"
            :key="index"
          ></component>
        </div>
      </a-col>
    </a-row>
    <a-row :gutter="24" style="margin-top: 24px">
      <a-col v-for="(coi, idx) in 8" :key="idx" :span="3">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            width: 160px;
            height: 130px;
            background-color: white;
            cursor: pointer;
          "
        >
          <div
            v-if="
              isEdit &&
              !portletList.filter((m) => m.params.parentId === layoutId && m.params.parentSection === coi + 3).length
            "
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
              border: 1px solid black;
            "
            @click="$emit('addPortlet', { parentId: layoutId, parentSection: coi + 3 })"
          >
            <span style="font-size: 84px">{{ coi + 3 }}</span>
          </div>

          <component
            :is="item.com"
            v-for="(item, idx) in portletList.filter(
              (m) => m.params.parentId === layoutId && m.params.parentSection === coi + 3
            )"
            :key="idx"
          ></component>
        </div>
      </a-col>
    </a-row>
    <a-row :gutter="24" style="margin-top: 24px">
      <a-col v-for="(coi, idx) in 2" :key="idx" :span="12">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            width: 702px;
            height: 383px;
            background-color: white;
            cursor: pointer;
          "
        >
          <div
            v-if="
              isEdit &&
              !portletList.filter((m) => m.params.parentId === layoutId && m.params.parentSection === coi + 11).length
            "
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
              border: 1px solid black;
            "
            @click="$emit('addPortlet', { parentId: layoutId, parentSection: coi + 11 })"
          >
            <span style="font-size: 84px">{{ coi + 11 }}</span>
          </div>

          <component
            :is="item.com"
            v-for="(item, idx) in portletList.filter(
              (m) => m.params.parentId === layoutId && m.params.parentSection === coi + 11
            )"
            :key="idx"
          ></component>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
export default {
  props: {
    portletList: { type: Array, default: () => [] },
    isEdit: { type: Boolean, default: true },
    layoutId: { type: Number, default: null },
  },
}
</script>
